<template>
  <div class="deta">
    <img src alt />
    <div>
      <div class="head">
        <div>
          <p>{{name}}</p>
          <p>
            <span>评分:</span>
            <span>{{de}}</span>
            <span>分</span>
            <span>按时送达</span>
          </p>
        </div>
        <time>2017-02-10</time>
      </div>
      <ul class="tupian">
        <li v-for="(src,i) in img" :key="i">
          <img :src="src" alt />
        </li>
      </ul>
      <p>{{msg}}</p>
      <ul class="jianpin">
        <li v-for="(sst ,i) in st" :key="i">{{sst}}</li>
      </ul>
    </div>
  </div>
</template>

<script>
export default {
  components: {},
  data() {
    return {
      name: '卖家的托',
      img: [
        'https://fuss10.elemecdn.com/d/c8/64033625905f0a15a2d181d53a425jpeg.jpeg',
        'https://fuss10.elemecdn.com/0/74/e0e203f613deff4e456c31e4177d1jpeg.jpeg'
      ],
      de: 5,
      st: ['番茄炒蛋', '佛跳墙'],
      msg: '非常好吃,五星好评！'
    }
  },
  methods: {}
}
</script>
<style  scoped>
li {
  list-style-type: none;
}
ul {
  margin: 0;
  padding: 0;
}
.deta {
  background-color: #fff;
  padding: 0 0.5rem;
  display: flex;
}
.deta > img {
  width: 2rem;
  height: 2rem;
  margin-right: 0.8rem;
  border-radius: 50%;
  background-color: #3190e8;
}
.deta > div {
  flex: 1;
}
.head {
  display: flex;
  justify-content: space-between;
  margin-bottom: 0.3rem;
}
.head > div > p {
  color: #666;
  margin-bottom: 0.2rem;
  margin: 0;
  padding: 0;
  font-size: 0.8rem;
}
.head > div > p > span:nth-child(2) {
  font-size: 1rem;
  color: #f60;
}
.head > div > p > span:last-child {
  color: #3190e8;
}
.tupian {
  display: flex;
  -webkit-flex-wrap: wrap;
  flex-wrap: wrap;
  margin-bottom: 0.4rem;
}
.tupian img {
  width: 3rem;
  height: 3rem;
  margin-right: 0.4rem;
  display: block;
}
time {
  font-size: 0.5rem;
}
.jianpin {
  display: flex;
}
.jianpin > li {
  font-size: 0.55rem;
  color: #999;
  width: 2.2rem;
  padding: 0.2rem;
  border: 0.025rem solid #ebebeb;
  border-radius: 0.15rem;
  margin-right: 0.3rem;
  margin-bottom: 4px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
p {
  margin-bottom: 0.5rem;
}
</style>